<template>
    <div class="outer flop">
      <div class="content">
        <div class="banner"></div>
        <button class="close" @click="popupSwitch('cgLotteryStatus', hasDrawn)"></button>
        <ul>
          <li class="item" v-for="n in 6" :key="n" @click="getPrize(n)" :class="[prizePosition[n - 1], {rotate: rotate}]">
            <p :class="['card-bg-normal', 'layout', {tip:tip == n}]">
              <a class="layout" v-html="ctrlBrandText(prizePosition[n - 1])"></a>
            </p>
          </li>
        </ul>
        <swiper></swiper>
      </div>
      <div class="popup" v-if="popupShow">
        <div class="modal layout">
          <div class="show-light layout"></div>
          <div :class="['card-show', prizePosition[tip - 1]]">
            <p class="layout" v-html="brandText[prizePosition[tip - 1]]"></p>
            <div class="close" v-if="prizePosition[tip - 1] == 'goldSentence'" @click="ownPopupSwitch"></div>
          </div>
          <button class="put-in-wallet" v-if="prizePosition[tip - 1] != 'goldSentence'" @click="ownPopupSwitch"></button>
        </div>
      </div>
    </div>

</template>
<script>
  import swiper from 'components/common/SlideShow'
  import remoteDAO from '@/common/remoteDAO'
//  import {getDate} from '@/common/common'
  import { microspotTarget } from '@/common/decorators'
  import localDAO from '@/common/localDAO'
  import constant from '@/common/constant'
  export default {
    data () {
      return {
        prizePosition: [],
        tip: '',
        rotate: false,
        popupShow: false,
        hasDrawn: false,
        brandText: {
          ingot: `<span>${Math.random() > 0.5 ? 10 : 50}君元宝</span>`,
          goldSentence: '<span>知足者输少当赢</span><span>不知足者越套越深</span>',
          levelCard: '<span>level2卡券</span>',
          callCard5: '<span>5元</span><span>话费卡</span>',
          callCard10: '<span>10元</span><span>话费卡</span>',
          jdECard: '<span>30元</span><span>京东E卡</span>'
        },
        ingotNum: 0,
        AAA: 1231231
      }
    },
    props: {
      popupSwitch: {
        type: Function
      },
      type: {
        default: 'ordinary'
      }
    },
    components: {
      swiper
    },
    computed: {
    },
    methods: {
      ctrlBrandText (key) {
        return this.brandText[key]
      },
      ownPopupSwitch () {
        this.popupShow = !this.popupShow
        if (!this.popupShow) {
          this.hasDrawn = this.rotate = true
        }
      },
      ctrlPrizePosition (n, gained) {
        let vm = this
        vm.prizePosition = new Array(6);
        vm.$set(vm.prizePosition, n, gained.toString())

        for (let i = 0; i < 6; i++) {               // Array.includes(undefined) 为 true 但 Array.indexOf(undefined)  始终为-1
          if (vm.prizePosition[i] === undefined) vm.prizePosition[i] = 0
        }

        while (vm.prizePosition.includes(0)) {            // 当 prizePosition 含 0 就执行循环
          let tmpIndex = vm.prizePosition.indexOf(0)
          let i = Math.trunc(Math.random() * 6)                         // 产生随机索引 0 - 5
          if (!vm.prizePosition.includes(Object.values(constant.PrizeEnum)[i])) {    // 如果 prizePosition 不含 constant.PrizeEnum[i]
            vm.$set(vm.prizePosition, tmpIndex, Object.values(constant.PrizeEnum)[i])
          }
        }

        vm.ownPopupSwitch()
      },
      @microspotTarget
      getPrize (n) {
        return new Promise(async (resolve, reject) => {
          if (this.rotate) return
          this.tip = n
          resolve('006001')
          try {
//          let res = {
//            data: {
//              body: [
//                {
//                  WALLET_CODE: 'KQ_201703_LEVEL2KQ'
//                },
//                {
//                  WALLET_CODE: 'KQ_201709_QD10YHFDHQ'
//                },
//                {
//                  WALLET_CODE: 'KQ_201709_QD5YHFDHQ'
//                },
//                {
//                  WALLET_CODE: 'KQ_201709_QDJD30YEKDH'
//                },
//                {
//                  WALLET_CODE: ' MY_201709250000006066',
//                  WALLET_NAME: '知足者输少当赢，不知足者越套越深'
//                },
//                {
//                  WALLET_CODE: ' MY',
//                  WALLET_NAME: '会买的是徒弟，会卖的才是师傅'
//                }
//              ]
//            }
//          }
            let res = await remoteDAO.callUC12000304(localDAO.getUserCode(), this.$store)
            const PrizeCode = res.data.body[0].WALLET_CODE
            let prize = constant.PrizeEnum[PrizeCode] || 'goldSentence'
            console.log(res, prize)

            if (prize == 'ingot') {
              this.$set(this.brandText, 'ingot', `<span>${res.data.body[0].WALLET_NUM}君元宝</span>`)
            } else if (prize == 'goldSentence') {
              let innerHTML = ''
              let sentenceContent = res.data.body[0].WALLET_NAME.split('，')
              sentenceContent.forEach((v) => {
                innerHTML += `<span>${v}</span>`
              })
              this.$set(this.brandText, 'goldSentence', innerHTML)
            }
            this.ctrlPrizePosition(n - 1, prize)
          } catch (err) {
//          alert(err.data ? err.data : '抽奖失败 请稍后重试！')
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .backgroundOpt(@left, @top, @w, @h) {
    background-repeat: no-repeat;
    background-position: @left @top;
    background-size: @w @h;
  }
  .bgCover (@url) {
    background: url(@url) no-repeat 0 0 / cover;
  }
  .bgFull (@url) {
    background: url(@url) no-repeat left top / 100%;
  }
  .IngotBg () {
    background-image: url("../../../assets/images/gold.png")
  }
  .goldStcBg () {
    background-image: url("../../../assets/images/no_award.png")
  }
  .levelCardBg () {
    background-image: url("../../../assets/images/level2_1mth.png")
  }
  .callCard5Bg () {
    background-image: url("../../../assets/images/phone_fare5.png")
  }
  .callCard10Bg () {
    background-image: url("../../../assets/images/phone_fare10.png")
  }
  .jdECardBg () {
    background-image: url("../../../assets/images/jd.png")
  }
  .fontStyle () {
    color: #ce722f;
    font-size: 14px;
  }
  .flop{
    height: 502px;
    .content{
      margin-top: -5px;
      width: 325px;
      height: 467px;
      border-radius: 11.5px;
      background: white;
      .banner{
        width: 100%;
        height: 86.5px;
        .bgCover("../../../assets/images/banner_sign.png")
      }
      ul{
        padding: 15.5px 18px 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
          width: 88.5px;
          height: 116.5px;
          .bgCover("../../../assets/images/card_back.png");
          margin-bottom: 9.5px;
          backface-visibility: hidden;
          transform-style: preserve-3d;
          transition: .8s all linear;
          p{
            text-align: center;
            z-index: -1;
            transform: rotateY(180deg);
            backface-visibility: hidden;
            a, & span{
              display: block;
              .fontStyle();
            }
          }
          .card-bg-normal{
            .bgFull("../../../assets/images/card_normal.png");
          }
          .tip{
            background: url("../../../assets/images/card_hook.png") no-repeat left top / 100% !important;
          }
          &.ingot a {
            .IngotBg();
            .backgroundOpt(13.5px,37.5px,59.5px,28px);
            position: relative;
            span{
              position: absolute;
              left: 19px;
              bottom: 20.5px;
            }
          }
          &.goldSentence a{
            .goldStcBg();
            .backgroundOpt(13.5px,20px,58.5px,14px);
            span{
              font-size: 11px !important;
              padding: 0 2px;
              transform: translateY(36px);
            }
          }
          &.levelCard a{
            .levelCardBg();
            .backgroundOpt(21.5px, 21.5px,47px, 54.5px);
            position: relative;
            span{
              position: absolute;
              left: 14px;
              bottom: 20.5px;
            }
          }
          &.callCard5 a{
            .callCard5Bg();
          }
          &.callCard10 a{
            .callCard10Bg();
          }
          &.callCard5 a, &.callCard10 a{
            .backgroundOpt(17px, 17px, 57px, 41px);
            span{
              transform: translateY(62px);
            }
          }
          &.jdECard a{
            .jdECardBg();
            .backgroundOpt(18.5px, 24px,53.5px, 34px);
            span{
              transform: translateY(60px);
            }
          }
        }
        .rotate{
          transform: rotateY(180deg);
          p{
            z-index: 99;
          }
        }
      }
    }
    .popup{
      position: absolute;
      top: -82.5px;
      left: -10px;
      z-index: 99;
      width: 375px;
      height: 667px;
      .modal{
        background: rgba(0,0,0,.6);
        position: relative;
        .show-light{
          background: url("../../../assets/images/bg_celebrate.png") no-repeat center 134.5px;
          background-size: 330px 334px;
        }
        .card-show{
          .fontStyle();
          position: absolute;
          top:226px;
          left: 128px;
          width: 118.5px;
          height: 146.5px;
          background-color: #fffbe2;
          border:1px #f6dbb9 solid;
          border-radius: 10px;
          .close{
            width: 29px;
            height: 29px;
            position: absolute;
            top: -10px;
            right: -10px;
            .bgFull("../../../assets/images/btn_close.png");
          }
          span{
            display: block;
          }
        }
        .ingot {
          .IngotBg();
          .backgroundOpt(25px,39.5px,68.5px,32px);
          span{
            transform: translateY(90px);
          }
        }
        .goldSentence{
          font-size: 12px;
          background-image: url("../../../assets/images/no_award_lucky_03.png");
          .backgroundOpt(12px,26.5px,94.5px,33px);
          span{
            transform: translateY(76px);
          }
        }
        .levelCard{
          .levelCardBg();
          .backgroundOpt(37px, 35px,47px, 54.5px);
          span{
            transform: translateY(100px);
          }
        }
        .callCard5{
          .callCard5Bg();
        }
        .callCard10{
          .callCard10Bg();
        }
        .callCard5, .callCard10{
          .backgroundOpt(30px, 26px, 60px, 43px);
          span{
            transform: translateY(80px);
          }
        }
        .jdECard{
          .jdECardBg();
          .backgroundOpt(30px, 30px,56.5px, 36px);
          span{
            transform: translateY(80px);
          }
        }
        .put-in-wallet{
          position: absolute;
          top:395px;
          left: 93px;
          width: 190px;
          height: 47px;
          .bgCover("../../../assets/images/btn_into_wallet.png");
        }
      }
    }
  }
</style>
